{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import google_play_button, apple_app_store_button with context %}

{% extends "firefox/base/base-protocol.html" %}

{% block page_css %}
  {{ css_bundle('firefox-browsers-get-app') }}
{% endblock %}

{% block page_title %}{{ ftl('firefox-mobile-download-the-firefox-browser') }} | {{ ftl('firefox-mobile-firefox') }}{% endblock %}
{% block page_desc %}{{ ftl('firefox-mobile-firefox-browser-for-mobile') }}{% endblock %}
{% block page_og_title %}{{ ftl('firefox-mobile-get-the-mobile-browser-built') }} | {{ ftl('firefox-mobile-firefox') }}{% endblock %}
{% block page_og_desc %}{{ ftl('firefox-mobile-check-out-firefox-again-its') }}{% endblock %}

{% set show_send_to_device = LANG in settings.SEND_TO_DEVICE_LOCALES %}

{% block site_header %}
  {% with hide_nav_download_button=True %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% set message_set = 'fx-mobile-download-desktop' %}
{% set android_url = play_store_url('firefox', 'firefox-browsers-mobile-get-app') %}
{% set ios_url = app_store_url('firefox', 'firefox-browsers-mobile-get-app') %}

{% block sub_navigation %}
  {% include 'firefox/includes/sub-nav-firefox.html' %}
{% endblock %}

{% block content %}
<main class="mzp-l-content mzp-t-content-md mzp-t-firefox">
  <section>
    <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox"></div>
    <h1>{{ ftl('firefox-mobile-get-firefox-mobile') }}</h1>
    {% if show_send_to_device %}
      <p>{{ ftl('firefox-mobile-send-a-download-link-to-your') }}</p>
      {{ send_to_device(include_title=False, message_set=message_set) }}
    {% else %}
      <p>{{ ftl('firefox-mobile-scan-the-qr-code-to-get-started') }}</p>
      <div class="qr-code-wrapper">
        <img src="{{ static('img/firefox/browsers/mobile/qrcode-firefox-browsers-mobile-get-app.png') }}" id="firefox-qr" alt="" width="350" height="350">
      </div>
    {% endif %}
  </section>

  <aside class="mobile-download-buttons-wrapper">

    <ul class="mobile-download-buttons">
      <li class="android">
        {{ google_play_button(href=android_url, id='play-store-link') }}
      </li>
      <li class="ios">
        {{ apple_app_store_button(href=ios_url, id='app-store-link') }}
      </li>
    </ul>
  </aside>

</main>
{% endblock %}

{% block js %}
  {{ js_bundle('firefox-browsers-get-app') }}
{% endblock %}
